/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from "react";
import { useDispatch } from "dva";
import { Button, Col, Row, Table, Switch, Popconfirm } from "antd";
import KbPreviewImage from "@/components/KbPreviewImage";
import MiniAdvAdd from "./MiniAdvAdd";

const imgList = [
  {
    pic: "https://cdn-img.kuaidihelp.com/kb_city_web/wxSetting/advSetting/banner_ad.png",
    title: "banner广告",
  },
  {
    pic: "https://cdn-img.kuaidihelp.com/kb_city_web/wxSetting/advSetting/insert_ad.png",
    title: "插屏广告",
  },
  {
    pic: "https://cdn-img.kuaidihelp.com/kb_city_web/wxSetting/advSetting/welfare_ad.png",
    title: "福利广告",
  },
];

const typeMap = {
  1: "banner广告",
  2: "插屏广告",
  // 3: "福利广告",
};

const positionMap = {
  check_piece_page: "查件页",
  logistics_details_page: "物流详情页",
  subscribe_get_page: "预约取件页",
  order_submit_page: "订单提交页",
  stage_home_page: "驿站主页",
  order_details_page: "订单详情页",
};

const Mini = () => {
  const dispatch = useDispatch();

  const [list, setList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [modalType, setModalType] = useState("add");
  const [record, setRecord] = useState({});

  const getList = () => {
    dispatch({
      type: "wxSettings/getMiniAdvList",
    }).then(res => {
      setList(res);
    });
  };

  const onEditAdv = record => {
    setVisible(true);
    setModalType("edit");
    setRecord(record);
  };

  const onStatusChange = (status, id) => {
    dispatch({
      type: "wxSettings/changeMiniAdvStatus",
      payload: {
        id,
        status: status ? 1 : 2,
      },
    })
      .then(() => {
        getList();
      })
      .catch(() => {
        getList();
      });
  };

  const onDelete = id => {
    dispatch({
      type: "wxSettings/deleteMiniAdv",
      payload: {
        id,
      },
    })
      .then(() => {
        getList();
      })
      .catch(() => {
        getList();
      });
  };

  const columns = [
    {
      title: "广告类型",
      dataIndex: "type",
      key: "type",
      width: 150,
      render: adv_type => typeMap[adv_type],
    },
    {
      title: "广告位ID",
      dataIndex: "ad_id",
      key: "ad_id",
    },
    {
      title: "广告开启位置",
      dataIndex: "position",
      key: "position",
      render: adv_pos => adv_pos.map(v => positionMap[v]).join("、"),
    },
    {
      title: "操作",
      width: 300,
      align: "center",
      render: (_, record) => {
        const { id, status } = record;
        const disabled = status == "1"; // 已上线无法编辑删除
        return (
          <Row type="flex" justify="space-between" align="middle">
            <Col>
              <Button disabled={disabled} type="primary" onClick={() => onEditAdv(record)}>
                编辑
              </Button>
            </Col>
            <Col>
              <Switch
                onChange={e => onStatusChange(e, id)}
                checked={disabled}
                checkedChildren="下线"
                unCheckedChildren="上线"
              />
            </Col>
            <Col>
              <Popconfirm
                disabled={disabled}
                title="确认删除该广告？"
                onConfirm={() => onDelete(id)}
              >
                <Button disabled={disabled} type="danger">
                  删除
                </Button>
              </Popconfirm>
            </Col>
          </Row>
        );
      },
    },
  ];

  useEffect(() => {
    getList();
  }, []);

  return (
    <>
      <Row gutter={[0, 20]}>
        <Col>
          <Row type="flex" justify="end" align="middle" gutter={[20, 0]}>
            <Col>
              <KbPreviewImage type="check" imgWidth={400} src={imgList}>
                <a>查看流量主广告示意图</a>
              </KbPreviewImage>
            </Col>
            <Col>
              <Button
                type="primary"
                onClick={() => {
                  setVisible(true);
                  setModalType("add");
                  setRecord({});
                }}
              >
                添加广告
              </Button>
            </Col>
          </Row>
        </Col>
        <Col>
          <Row>
            <Col>
              <Table rowKey="id" columns={columns} dataSource={list} scroll={{ x: 1000 }} />
            </Col>
          </Row>
        </Col>
      </Row>
      <MiniAdvAdd
        visible={visible}
        onClose={() => setVisible(false)}
        type={modalType}
        record={record}
        refreshParent={getList}
      />
    </>
  );
};

export default Mini;
